<template>
	<view class="page">
		<view class="centent">
			<u--textarea v-model="content" placeholder="请输入内容"></u--textarea>
			<view class="dis aic" style="margin: 20rpx 0;">
				<view class="add" @click="uploadImg(-1)" v-if="imageList.length < 2">+</view>
				<image :src="item" class="add_img" mode="aspectFit" @click="uploadImg(index)"
					v-for="(item,index) in imageList"></image>
			</view>
			<view class="tips">
				<view class="dis aic mt10 mb30">
					<image src="/static/image/jing.png" class="img" mode="widthFix"></image>
					<view class="name">
						选择标签
					</view>
				</view>
				<view class="tips_box">
					<view v-for="(item,index) in tips" :key="index" class="li dis aic">
						<view class="left" :style="{background:colorArr[index]}">
							{{item.name}}
						</view>
						<view class="right">
							<view class="right_li"
								:style="{ background:item2.id == id   ? colorArr[index] : '#fff', color: item2.id == id ? '#fff' : '#000'   }"
								v-for="(item2,index2) in item.CategoryTwo" :key="index2"
								@click="changeTips(item2,index2)">
								{{item2.name}}
							</view>
						</view>
					</view>

					<!-- <view :class="[selectIndex.includes(index) ? 'lic' : 'li']" v-for="(item,index) in tips"
						:key="index" @click="changeTips(item,index)">
						{{item.name}}
					</view> -->
				</view>
			</view>
		</view>
		<view class="save" @click="Save">发布</view>
	</view>
</template>

<script>
	import {
		categoryTwoList,
		discussionPublish,
	} from '@/api.js'

	export default {
		data() {
			return {
				selectIndex: [],
				content: '',
				tips: [],
				imageList: [],
				id: '',
				colorArr: [
					'linear-gradient(135deg, #e93361, #f44c7b)',
					'linear-gradient(135deg, #f0552d, #f4702a)',
					'linear-gradient(135deg, #48a3e3, #58acd9)',
					'linear-gradient(135deg, #8c15ff, #9353f9)',
				],
				isLock: false
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			uploadImg(index) {

				var that = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '加载中',
							mask: true,
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.cardAddVOS = []
						uni.uploadFile({
							url: 'https://xybl.appldkj.com/api/jeecg-boot/sys/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (uploadFileRes) => {
								uni.hideLoading()
								let msg = JSON.parse(uploadFileRes.data).message
								if (index == -1) {
									that.imageList.push(msg)
								} else {
									that.imageList[index] = msg
								}
								this.$forceUpdate()
							}
						});
					}
				});
			},
			init() {
				this.getList()
			},
			async getList() {
				let res = await categoryTwoList()
				console.log('标签', res.result);
				this.tips = res.result
			},
			changeTips(item, index) {
				if (this.id == item.id) {
					this.id = ''
					this.selectIndex = []
				} else {
					this.id = item.id
					this.selectIndex = [index]
				}

			},
			async Save() {
				let that = this
				if (!this.content || this.content == '') {
					uni.showToast({
						title: '请输入您要发布的内容~',
						icon: "none"
					})
					return
				}
				if (!this.id || this.id == '') {
					uni.showToast({
						title: '请选择标签~',
						icon: "none"
					})
					return
				}
				if (this.isLock) {
					return
				}
				this.isLock = true
				let res = await discussionPublish({
					categoryTwoId: that.id,
					content: that.content,
					images: this.imageList.join(',')
				})
				if (res.code == 200) {
					uni.showToast({
						title: '发布成功',
						icon: "none"
					})
					setTimeout(() => {
						this.isLock = false
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 2000)
				} else {
					this.isLock = false
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding: 20rpx 30rpx;
		width: 750rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background: #f8f8f8;

		.centent {


			.tips {


				.img {
					width: 40rpx;
				}

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #6E6D73;
					margin-left: 10rpx;
				}

				.tips_box {
					display: flex;
					flex-wrap: wrap;
					align-items: stretch;
					overflow-y: scroll;

					.li {
						width: 690rpx;
						margin: 20rpx 0rpx;
						border-radius: 20rpx;
						overflow: hidden;

						.left {
							width: 200rpx;
							padding: 20rpx;
							box-sizing: border-box;
							color: #fff;
							min-height: 100%;
							height: auto;
						}

						.right {
							flex: 1;
							min-height: 40px;
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							gap: 4rpx 4rpx;

							.right_li {
								text-align: center;
								align-items: center;
								background: #fff;
								padding: 16rpx 0rpx;
								width: calc(50% - 4rpx);
							}
						}
					}





					.lic {}
				}
			}
		}
	}

	.save {
		width: 690rpx;
		height: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FBE43F;
		border-radius: 67rpx 67rpx 67rpx 67rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		position: fixed;
		left: 30rpx;
		bottom: 60rpx;
	}

	.mt10 {
		margin-top: 10rpx;
	}

	.mb30 {
		margin-bottom: 30rpx;
	}

	.add {
		width: 206rpx;
		height: 206rpx;
		line-height: 206rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #D9D9D9;
		text-align: center;
		margin: 10rpx 0;
		font-size: 80rpx;
		color: #D9D9D9;
		margin-right: 20rpx;
	}

	.add_img {
		width: 206rpx;
		height: 206rpx;
		margin-right: 20rpx;
	}
</style>